<template>
  <div class="home-wrapper">
    <h3 class="title">
      账户管理
      <div class="fr">
        <el-button type="primary"
                   @click="addmanage">添加</el-button>
      </div>
    </h3>
    <el-dialog title="账户管理"
               :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="账户id"
                      :label-width="formLabelWidth">
          <el-input v-model="form.account_id"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="账户名称"
                      :label-width="formLabelWidth">
          <el-input v-model="form.account_name"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="Gid"
                      :label-width="formLabelWidth">
          <el-input v-model="form.gid"
                    autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="投放平台"
                      prop="type"
                      :label-width="formLabelWidth">
          <el-select v-model="form.type"
                     placeholder="请选择活动区域"
                     style="width: 100%">
            <el-option v-for="item in typelist"
                       :key="item.index"
                       :label="item.name"
                       :value="item.type"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary"
                   @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <el-table :data="tableData"
              style="width: 98%; margin: 0 auto"
              :header-cell-style="{
        'text-align': 'center',
        background: 'rgb(84, 92, 100)',
        color: '#fff',
      }"
              border>
      <el-table-column prop="account_id"
                       label="账户id"
                       align="center">
      </el-table-column>
      <el-table-column prop="account_name"
                       label="账户名称"
                       align="center">
      </el-table-column>
      <el-table-column prop="project_user"
                       label="负责人"
                       align="center">
      </el-table-column>
      <el-table-column prop="gid"
                       label="Gid"
                       align="center"> </el-table-column>
      <el-table-column :formatter="statusFormatter"
                       prop="type"
                       label="投放平台"
                       align="center">
      </el-table-column>
      <el-table-column label="操作"
                       align="center">
        <template slot-scope="scope">
          <el-button size="mini"
                     @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
          <el-button size="mini"
                     type="danger"
                     @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
      <el-table-column label="人员分配"
                       align="center">
        <template slot-scope="scope">
          <el-button @click="fenpei(scope.row)"
                     type="primary">分配人员</el-button>
          <el-dialog title="分配人员"
                     :visible.sync="dialogVisible"
                     width="30%"
                     center>
            <el-input v-model="xiangmu"
                      :disabled="true"
                      style="margin-bottom: 20px">
            </el-input>
            <el-select v-model="value"
                       filterable
                       multiple
                       placeholder="请选择分配的人员"
                       style="width: 100%"
                       @change="distribution">
              <el-option v-for="item in human"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
            <el-button @click="usersend"
                       style="display: block; margin: 20px auto">确认分配</el-button>
          </el-dialog>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { get, post } from "../../utils/axios.js";
export default {
  data () {
    return {
      dialogTableVisible: false,
      dialogFormVisible: false,
      tableData: [],
      human: [],
      users: [],
      fenpeiren: "",
      xiangmu: "",
      dialogVisible: false,
      value: "",
      form: {
        gid: "",
        account_id: "", //账户id
        account_name: "", //广告id
        type: "", //电商平台
      },
      typelist: [
        { type: 1, name: "京东" },
        { type: 2, name: "淘宝" },
        { type: 3, name: "拼多多" },
      ],
      formLabelWidth: "120px",
    };
  },
  mounted () {
    this.reqmanagelist();
    this.$axios.get("/api/user/list").then((res) => {
      this.human = res.data.data;
    });
  },
  methods: {
    distribution (event) {
      this.users = event.join(",");
    },
    usersend () {
      this.$axios
        .get("/api/neworder/share", {
          account_id: this.fenpeiren,
          user_id: this.users,
        })
        .then((res) => {
          this.dialogVisible = false;
          if (res.data.code == 1) {
            this.$axios.get("/api/account/account_id_find").then((res) => {
              const { data } = res.data.data;
              this.tableData = data;
            });
            this.value = "";
          }
        });
    },
    handleEdit (index, row) { },
    handleDelete (index, row) { },
    // type值转化
    statusFormatter (row, column) {
      const type = row.type;
      if (type == 1) {
        return "京东";
      } else if (type == 2) {
        return "淘宝";
      } else if (type == 3) {
        return "拼多多";
      }
    },
    //请求列表
    reqmanagelist () {
      get("/api/account/account_id_find").then((res) => {
        if (res.data.code == 1) {
          const { data } = res.data.data;
          this.tableData = data;
        }
      });
    },
    //置空表格
    empty () {
      this.form = {
        gid: "",
        account_id: "", //账户id
        account_name: "", //广告id
        type: "", //电商平台
      };
    },
    //添加
    addmanage () {
      //弹窗出现
      this.dialogFormVisible = true;
    },
    fenpei (scope) {
      this.dialogVisible = true;
      this.xiangmu = scope.account_name;
      this.fenpeiren = scope.id;
    },
    //添加确定
    confirm () {
      this.dialogFormVisible = false;
      //接口传数据
      get("/api/account/account_id", this.form).then((res) => {
        if (res.data.code == 1) {
          //添加成功
          this.reqmanagelist();
        }
      });
      this.empty();
    },
    cancel () {
      this.dialogFormVisible = false;
      this.empty();
    },
    handleClose (done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => { });
    },
  },
};
</script>

<style scoped>
.el-dialog {
  width: 35%;
}
.title {
  padding: 20px;
  display: flex;
  align-content: center;
  justify-content: space-between;
  line-height: 40px;
  font-weight: bold;
}
</style>